<template>
	<view class="Status" :style="{'right':right,'top':top,'background':bgc,'zoom':zoom}">
		<view class="txt">{{state.status[txt]||txt}}</view>
	</view>
</template>

<script setup>
	import { reactive } from 'vue'
	const state = reactive({
		status: {
			Z: '暂 存',
			A: '保 存',
			B: '审核中',
			C: '已审核',
			D: '重新审核'
		}
	})

	const props = defineProps({
		top: {
			type: String,
			default: '0'
		},
		right: {
			type: String,
			default: '0'
		},
		status: {
			type: Number
		},
		bgc: {
			type: String,
			default: '#409eff'
		},
		txt: {
			type: String,
			default: ''
		},
		zoom: {
			type: Number,
			default: 1
		}
	})
</script>

<style lang="scss" scoped>
	.Status {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		width: 140rpx;
		height: 140rpx;
		z-index: 10;
		clip-path: polygon(0 0, 140rpx 140rpx, 140rpx 70rpx, 70rpx 0);
		zoom: 1;

		.txt {
			display: inline-block;
			position: absolute;
			margin-bottom: 36rpx;
			margin-left: 36rpx;
			transform: rotate(45deg);
			white-space: nowrap;
			color: #fff;
			font-weight: 600;
			font-size: 28rpx;
		}
	}
</style>